<!-- 搜索表单还没画，暂时不想做》。《 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
      <el-breadcrumb-item>成绩信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search">
      <label>成绩号:<input type="text" placeholder="请输入成绩号" v-model="courseId" /></label>
      <label>成绩名:<input type="text" placeholder="请输入成绩名" v-model="studentId" /></label>
    </div>
    <el-table :data="tableData" :height="height">
      <el-table-column label="课程号" width="140">
    <template slot-scope="scope">
      <span>{{ scope.row.courseId }}</span>
    </template>
  </el-table-column>
  <el-table-column label="课程名" width="140">
    <template slot-scope="scope">
      <span>{{ scope.row.courseName }}</span>
    </template>
  </el-table-column>
  <el-table-column label="学生号" width="140">
    <template slot-scope="scope">
      <span>{{ scope.row.studentId }}</span>
    </template>
  </el-table-column>
  <el-table-column label="学生名" width="140">
    <template slot-scope="scope">
      <span>{{ scope.row.studentName }}</span>
    </template>
  </el-table-column>
  <el-table-column label="教师号" width="140">
    <template slot-scope="scope">
      <span>{{ scope.row.teacherId }}</span>
    </template>
  </el-table-column>
  <el-table-column label="教师名" width="140">
    <template slot-scope="scope">
      <span>{{ scope.row.teacherName }}</span>
    </template>
  </el-table-column>
  <el-table-column label="成绩" width="140">
    <template slot-scope="scope">
      <span>{{ scope.row.score }}</span>
    </template>
  </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :page-sizes="[1, 3, 8]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="firstFrom.total">
      </el-pagination>
    <!-- 编辑弹窗 -->
     <el-dialog
      title="编辑成绩信息"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
  <el-form-item label="课程号" prop="courseId">
    <el-input v-model="ruleForm.courseId"></el-input>
  </el-form-item>
  <el-form-item label="课程名" prop="courseName">
    <el-input v-model="ruleForm.courseName"></el-input>
  </el-form-item>
  <el-form-item label="学生号" prop="studentId">
    <el-input v-model="ruleForm.studentId"></el-input>
  </el-form-item>
  <el-form-item label="学生名" prop="studentName">
    <el-input v-model="ruleForm.studentName"></el-input>
  </el-form-item>
  <el-form-item label="教师号" prop="teacherId">
    <el-input v-model="ruleForm.teacherId"></el-input>
  </el-form-item>
  <el-form-item label="教师名" prop="teacherName">
    <el-input v-model="ruleForm.teacherName"></el-input>
  </el-form-item>
  <el-form-item label="成绩" prop="score">
    <el-input v-model.number="ruleForm.score"></el-input>
  </el-form-item>
</el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="updateEdit(ruleForm)">保存</el-button>
      </div>
    </el-dialog> 
  </div>
</template>


<script>
export default {
  name: "gradeInfo",
  data() {
    return {
      firstFrom:{
        // 用于保存初始的条数
      total:0,
      },
      pageFrom:{
        page: 1,
        pageSize: 3
      },
      title: "成绩信息表",
      gradeId:'',	
      gradeName:'',
      courseId:'',
      studentId:'',
      studentName:'',	
      teacherId:'',
      teacherName:'',
      name:'',
      // 用于表格渲染
      tableData: [],
      height: document.documentElement.clientHeight - 120,
      dialogFormVisible: false,
      formLabelWidth: "100px",
      //用于搜索的框
      searchForm:{},
      //用于修改的框
      ruleForm: { courseId:'',	
      courseName:'',
      studentId:'',
      studentName:'',	
      teacherId:'',
      teacherName:'',
    score:''},
    rules: {
  courseId: [{ required: true, message: "请填写课程号" }],
  courseName: [{ required: true, message: "请填写课程名" }],
  studentId: [{ required: true, message: "请填写学生号" }],
  studentName: [{ required: true, message: "请填写学生名" }],
  teacherId: [{ required: true, message: "请填写教师号" }],
  teacherName: [{ required: true, message: "请填写教师名" }],
  score: [{ required: true, message: "请填写成绩" }],
},

      }},
  methods: {
    // 数据分页
    handleCurrentChange(currentPage) {
      this.pageFrom.page = currentPage;
      // 每次更改都要请求一次tabledata数据，在后端做数据分页！>.<！
      this.getgradeTable()
    },
    handleSizeChange(size) {
      this.pageFrom.pageSize = size;
      this.getgradeTable()
      // 每次更改都要请求一次tabledata数据，在后端做数据分页！>.<！
    },
    // 获取成绩信息表
    async getgradeTable() {
      const dataToSerialize = { ...this.pageFrom };
      if (this.gradeID) {
    dataToSerialize.gradeId=this.gradeID;
}

     if (this.name) {
    dataToSerialize.name=this.name;
}

    // JSON化
    const config = {
      headers: {
        'Content-Type': 'application/json',
        'token':`${localStorage.getItem("token")}`// Custom request header
      }
    };
    try {
      const { data: res } = await this.$http.post(`api/admin/grade/page`,JSON.stringify(dataToSerialize),config);
      if (res.status !== 500) {
        this.tableData=res.data.records;
      } else {
        this.$message.error('获取失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('请求失败');
  }
    
    },
    // 获取成绩初始数据
    async getFirstgradeTable() {
    // JSON化
    const config = {
      headers: {
        'Content-Type': 'application/json',
        'token':`${localStorage.getItem("token")}`// Custom request header
      }
    };
    try {
      const { data: res } = await this.$http.post(`api/admin/grade/page`,JSON.stringify(this.pageFrom),config);
      if (res.status !== 500) {
        this.$message.success('成功获取所有成绩');
        this.tableData=res.data.records;
        this.firstFrom.total = res.data.total; // 保存总条数
      } else {
        this.$message.error('获取失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('请求失败');
  }
    
    },
    //删除成绩信息,还可以检索名字
    async deletegradeInfo(ID,Name) {
      const dataToSerialize = {};
      if (ID) {
    dataToSerialize.courseId=ID;
}

        if (Name) {
        dataToSerialize.studentId=Name;
    }
    // JSON化
    const config = {
      headers: {
          'Content-Type': 'application/json',
        }
      };
    try {
      const { data: res } = await this.$http.delete('api/admin/grade/delete',{data:JSON.stringify(dataToSerialize), // 请求数据
    headers: config.headers })
      if (res.status !== 500) {
        this.$message.success('成功删除成绩信息');
        // 重新调用获取表格的代码
        this.getFirstgradeTable();
      } else {
        this.$message.error('删除失1败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('删除失败');
  }
    },
    // 启动编辑功能
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.ruleForm = { ...row };

    },
    // 保存编辑按钮
    async updateEdit(params) {
      if (confirm("是否确认所编辑的内容！")){
    // JSON化
    const config = {
      headers: {
        'Content-Type': 'application/json',
        'token':`${localStorage.getItem("token")}`// Custom request header
      }
    };
    try {
      const { data: res } = await this.$http.put(`api/admin/grade/update`,JSON.stringify(params),config);
      if (res.status !== 500) {
        this.$message.success('成功编辑成绩信息');
        // 重新调用获取表格的代码
        this.getgradeTable();
        this.dialogFormVisible = false;
      } else {
        this.$message.error('编辑失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('编辑失败');
  }
}
},
    // 取消编辑按钮
    cancelEdit() {
      if (confirm("是否确认取消所编辑的内容！")) {
        this.dialogFormVisible = false;
      }
    },
    // 删除功能
    handleDelete(index, row) {
      if (confirm("是否确认删除？")) {
        this.deletegradeInfo(row.courseId,row.studentId);
      }
    },
  },

  mounted() {
    if(localStorage.getItem("type") !== 'admin'){this.$router.push(`/login`);this.$message.error('权限不够');}
    this.getFirstgradeTable();
  },
};
</script>

<style lang="less" scoped>
.search {
  background-color: #fff;
  padding:10px 5px;
  font-size:14px;
  text-align: right;
}
.search label {
  margin-right:30px;
}
.search input {
  margin-left:10px;
  width:160px;
  outline: none;
}
.el-breadcrumb {
  padding-bottom: 10px;
}
.el-table {
  width: 100%;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 70px;
  margin-bottom: 0;
  min-width: 40%;
  max-width: 84%;
}
/deep/ .el-table .el-table__cell {
  padding: 8px 0;
}
/deep/ .el-dialog {
  margin-top: 10px !important;
}
/deep/.el-dialog__body {
  padding: 10px 20px !important;
  font-size: 12px !important;
}
/deep/.el-dialog__footer {
  padding: 0px 20px 10px !important;
}
</style>
